<template>
  <div id="app">
    <div id="nav">
<!--      <router-link to="/">Home</router-link> |-->
<!--      <router-link to="/about">About</router-link>-->
        <div id="home-body">
            <router-view></router-view>
        </div>
        <div id="home-bottom" v-if="this.$store.state.indexCurrent === 0">
            <div class="first-page" @click="onsubmitOne">
                <i class="el-icon-eleme" :class="{one:this.$store.state.currentNumber === 1}"></i>
                <span class="page-name" :class="{one:this.$store.state.currentNumber === 1}">首页</span>
            </div>
            <div class="first-page" @click="onsubmitTwo">
                <i class="el-icon-discover" :class="{one:this.$store.state.currentNumber === 2}"></i>
                <span class="page-name" :class="{one:this.$store.state.currentNumber === 2}">发现</span>
            </div>
            <div class="first-page" @click="onsubmitThree">
                <i class="el-icon-document" :class="{one:this.$store.state.currentNumber === 3}"></i>
                <span class="page-name" :class="{one:this.$store.state.currentNumber === 3}">订单</span>
            </div>
            <div class="first-page" @click="onsubmit">
                <i class="el-icon-user" :class="{one:this.$store.state.currentNumber === 4}"></i>
                <span class="page-name" :class="{one:this.$store.state.currentNumber === 4}">我的</span>
            </div>
        </div>
    </div>
  </div>
</template>

<script>
    // import homePage from "./views/homePage/homePage";
    export default {
        name: "app",
        data(){
            return{

            }
        },
        components:{
            // homePage
        },
        methods:{
            onsubmit(){
                this.$router.push('/user');
                this.$store.state.currentNumber = 4;
            },
            onsubmitOne(){
                this.$router.push('/');
                this.$store.state.currentNumber = 1;
            },
            onsubmitTwo(){
                this.$router.push('/find')
                this.$store.state.currentNumber = 2;
            },
            onsubmitThree(){
                this.$router.push('/order')
                this.$store.state.currentNumber = 3;
            },
        }
    }
</script>
<style>
    #nav{
        width: 375px;
        height: 667px;
    }
    #home-bottom{
        width: 375px;
        height: 60px;
        margin-bottom: 0;
        display: flex;
        flex-flow: row nowrap;
        border-top: 2px solid #eee;
        position: fixed;
        bottom: 0;
        background:#eee;
    }
    #home-body{
        width: 100%;
        height: 607px;
    }
    .one{
        color: blue;
    }
    .first-page{
        flex: 1;
        display: flex;
        flex-flow: column;
        justify-content: center;
        align-items: center;
        font-size: 20px;
    }
    .page-name{
        font-size: 12px;
    }
/*#app {*/
/*  font-family: Avenir, Helvetica, Arial, sans-serif;*/
/*  -webkit-font-smoothing: antialiased;*/
/*  -moz-osx-font-smoothing: grayscale;*/
/*  text-align: center;*/
/*  color: #2c3e50;*/
/*}*/

/*#nav {*/
/*  padding: 30px;*/
/*}*/

/*#nav a {*/
/*  font-weight: bold;*/
/*  color: #2c3e50;*/
/*}*/

/*#nav a.router-link-exact-active {*/
/*  color: #42b983;*/
/*}*/
</style>
